@import "./tabbar";
@import "./tabbar.md.vars";

.tabbar-md {
  height: $tabbar-md-height;

  border-top: $tabbar-md-border;
  background: $tabbar-md-background-color;

  contain: strict;
}

.tabbar-md .tabbar-highlight {
  background: $tabbar-md-text-color-active;
}

.tabbar-md.scrollable ion-scroll {
  @include margin(0, 8px);

  max-width: 650px;
}

// Material Design Tabs Color Mixin
// --------------------------------------------------

@mixin tabbar-md($color-name) {
  $color-base: ion-color($colors-md, $color-name, base, md);
  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
  $color-shade: ion-color($colors-md, $color-name, shade, md);

  .tabbar-md-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;

    fill: $color-contrast;
  }

  .tabbar-md-#{$color-name} .tab-button.focused {
    background: $color-shade;
  }

  .enable-hover .tabbar-md-#{$color-name} .tab-button:hover,
  .tabbar-md-#{$color-name} .tab-button.tab-selected {
    color: $color-contrast;

    fill: $color-contrast;
  }

  .tabbar-md-#{$color-name} .tabbar-highlight {
    background: $color-contrast;
  }
}

// Material Design Tabbar Color Generation
// --------------------------------------------------

@each $color-name, $color-value in $colors-md {
  @include tabbar-md($color-name);
}
